<template>
  <view class="appliance-cards">
    <TrackButton
      v-for="appliance in list"
      :key="appliance.haId"
      track-id="Navigator.Home.Content.SelectAppliance"
      :track-data="appliance"
      @click="emit('select', appliance)"
    >
      <view class="appliance-card" hover-class="hovering">
        <alt-picture class="card-img" transparent :src="getAppliancePicture(appliance)" />
        <view class="card-name">{{ appliance.name }}</view>
        <view class="card-status">
          <ApplianceStatus :current="appliance" />
        </view>
      </view>
    </TrackButton>
    <TrackButton v-if="showAddAppliance" track-id="Navigator.Home.AddAppliance.Text">
      <view class="appliance-card connect-card" hover-class="hovering" @click="emit('add')">
        <view class="connect-icon">
          <image mode="aspectFit" src="/static/home/AddAppliance.png" />
        </view>
        <view class="connect-text">{{ $t('Navigator.Home.AddAppliance.Text') }}</view>
      </view>
    </TrackButton>
  </view>
</template>

<script setup lang="ts">
import netconfig from '@/config/netconfig'
import ApplianceStatus from '@/pages/navigator/components/applianceStatus.vue'
import type { ApplianceData } from '@/types/appliance'

defineProps<{
  list: ApplianceData[]
  showAddAppliance?: boolean
}>()
const emit = defineEmits<{
  (e: 'select', appliance: ApplianceData): void
  (e: 'add'): void
}>()

function getAppliancePicture(appliance: ApplianceData) {
  return netconfig.ASSETSPRE + appliance.picture
}
</script>

<style scoped lang="less">
.appliance-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-column: 2;
  gap: 24rpx;
  width: 100%;
  box-sizing: border-box;

  .appliance-card {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    height: 232rpx;
    padding: 16rpx 24rpx;
    box-shadow: 8rpx 12rpx 20rpx 0 rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    transition: filter 0.1s, box-shadow 0.1s;
    overflow: hidden;

    &.hovering {
      filter: brightness(0.99);
      box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
    }

    .card-img {
      width: 120rpx;
      height: 120rpx;
      margin-left: -24rpx;
    }

    .card-name {
      font-weight: 600;
      font-size: 28rpx;
      line-height: 40rpx;
      color: var(--dark-color);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .card-status {
      font-weight: 500;
      font-size: 24rpx;
      line-height: 40rpx;
    }
  }

  .connect-card {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 40rpx;
    color: var(--dark-color);
  }

  .connect-icon {
    width: 64rpx;
    height: 64rpx;
    margin-bottom: 20rpx;

    > image {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
